<template>
  <el-dialog
    v-model="visible"
    title="开具发票"
    width="600px"
    :before-close="handleClose"
  >
    <el-form 
      :model="form" 
      :rules="rules" 
      ref="formRef" 
      label-width="100px"
    >
      <el-form-item label="订单编号" prop="orderNumber">
        <el-input v-model="form.orderNumber" disabled />
      </el-form-item>
      
      <el-form-item label="客户名称" prop="customerName">
        <el-input v-model="form.customerName" disabled />
      </el-form-item>
      
      <el-form-item label="发票类型" prop="invoiceType">
        <el-select v-model="form.invoiceType" placeholder="请选择发票类型" style="width: 100%">
          <el-option label="增值税专用发票" value="special" />
          <el-option label="增值税普通发票" value="normal" />
          <el-option label="电子发票" value="electronic" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="发票金额" prop="amount">
        <el-input-number 
          v-model="form.amount" 
          :min="0" 
          :precision="2" 
          style="width: 100%"
          disabled
        />
      </el-form-item>
      
      <el-form-item label="开票日期" prop="invoiceDate">
        <el-date-picker
          v-model="form.invoiceDate"
          type="date"
          placeholder="选择开票日期"
          style="width: 100%"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      
      <el-form-item label="备注" prop="remark">
        <el-input 
          v-model="form.remark" 
          type="textarea" 
          placeholder="请输入备注信息"
        />
      </el-form-item>
    </el-form>
    
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="submitting">
        确认开票
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'

interface InvoiceForm {
  orderNumber: string
  customerName: string
  invoiceType: string
  amount: number
  invoiceDate: string
  remark: string
}

interface Order {
  id: string
  platformOrderId: string
  customerName: string
  amount: number
  // 其他订单字段...
}

const props = defineProps<{
  modelValue: boolean
  order: Order | null
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'success'): void
  (e: 'close'): void
}>()

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const formRef = ref<FormInstance>()
const submitting = ref(false)

const form = ref<InvoiceForm>({
  orderNumber: '',
  customerName: '',
  invoiceType: '',
  amount: 0,
  invoiceDate: '',
  remark: ''
})

const rules = ref<FormRules>({
  invoiceType: [
    { required: true, message: '请选择发票类型', trigger: 'change' }
  ],
  invoiceDate: [
    { required: true, message: '请选择开票日期', trigger: 'change' }
  ]
})

// 监听订单数据变化
watch(() => props.order, (newOrder) => {
  if (newOrder) {
    form.value = {
      orderNumber: newOrder.platformOrderId,
      customerName: newOrder.customerName,
      invoiceType: '',
      amount: newOrder.amount,
      invoiceDate: new Date().toISOString().split('T')[0],
      remark: ''
    }
  }
}, { immediate: true })

const handleClose = () => {
  visible.value = false
  emit('close')
}

const handleSubmit = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate((valid) => {
    if (valid) {
      submitting.value = true
      try {
        // 模拟开票过程
        setTimeout(() => {
          ElMessage.success('发票开具成功')
          submitting.value = false
          emit('success')
          handleClose()
        }, 1000)
      } catch (error) {
        ElMessage.error('开票失败')
        submitting.value = false
      }
    }
  })
}
</script>

<style scoped>
.el-form-item {
  margin-bottom: 20px;
}
</style>